/**
 * Hook 是一种复用状态逻辑的方式，它不复用 state 本身
 * 事实上 Hook 的每次调用都有一个完全独立的 state
 * 自定义 Hooks 函数偏向于功能，而组件偏向于界面和业务逻辑。
 * 自定义 Hooks 一定要用use开头
 */
import React, { useEffect, useState } from 'react';
import { Button } from 'antd-mobile';

function DirectiveSelfCom() {
  function useNumber() {
    const [number, setNumber]: [number, any] = useState(0);
    useEffect(() => {
      // setInterval(() => {
      //   setNumber((number: number) => number + 1);
      // }, 1000);
    }, []);
    return [number, setNumber];
  }
  // 每个组件调用同一个 hook，只是复用 hook 的状态逻辑，并不会共用一个状态
  function Counter1() {
    const [number, setNumber] = useNumber();
    return (
      <div>
        <Button
          onClick={() => {
            setNumber(number);
          }}
        >
          {number}
        </Button>
      </div>
    );
  }
  function Counter2() {
    const [number, setNumber] = useNumber();
    return (
      <div>
        <Button
          onClick={() => {
            setNumber(number + 1);
          }}
        >
          {number}
        </Button>
      </div>
    );
  }

  return (
    <div>
      <Counter1 />
      <Counter2 />
    </div>
  );
}
export default DirectiveSelfCom;
